<template>
  <table
    id="flight-search-result"
    class="table table-striped table-hover table-sm mb-0"
  >
    <thead>
      <th class="small">航班</th>
      <th class="text-center small">出发</th>
      <th class="text-center small">到达</th>
      <th class="text-center small">时间</th>
      <th class="text-center small">时长</th>
      <th class="text-center small">机型</th>
      <th class="text-center small">经停</th>
      <th class="text-center small">价格</th>
    </thead>
    <tbody>
      <template v-for="(flight, index) in flights">
        <tr @click.stop="showFlightDetail(flight)" name="flightItem">
          <td>
            {{ flight.flightNo }}
            <span v-if="flight.codeShare === 1" class="small"
              >({{ flight.opFlightNo }}执飞)</span
            >
          </td>
          <td class="text-center hidden-sm-down">
            {{ flight.dport }}
            <span class="small text-primary">{{ flight.dterm }}</span>
          </td>
          <td class="text-center hidden-sm-down">
            {{ flight.aport }}
            <span class="small text-primary">{{ flight.aterm }}</span>
          </td>
          <td class="text-center">
            <span class="text-info fa-2">{{ flight.dtime }}</span>
            <small>{{ flight.atime }}</small>
          </td>
          <td class="text-center">
            <span class="text-info fa-2">{{ flight.duration }}</span>
          </td>
          <td class="text-center">
            <span class="text-info fa-2">{{ flight.aircraft }}</span>
          </td>
          <td class="text-center">
            <span
              class="text-info fa-2"
              v-if="flight.stopover > 0 && flight.codeShare !== 1"
              @click.stop="showStopover(flight.flightNo, flight.ddate)"
            >
              {{ flight.stopover }}次
            </span>
          </td>
          <td>
            <template v-for="info in sortSubclass(flight.subClassList)">
              <div class="form-check form-check-inline" :key="info.subClass">
                <input class="form-check-input" type="radio" v-model="subClassSelected" :value="`${flight.flightNo}_${info.subClass}`" />
                <label class="form-check-label">
                  {{ info.subClass }} <span v-if="info.seatCount < 10" class="text-danger">{{ info.seatCount }}</span>
                  <template v-if="info.price > 0">
                  <br />
                  {{ info.price }}
                  </template>
                </label>
              </div>
            </template>
          </td>
          <td>
            <template v-if="flight.flightNo === flightNo">
              <button
              type="button"
              @click.stop="confirmFlight(index)"
              class="btn btn-primary"
            >
              确定
            </button>
            </template>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
import {
  showPsgType,
  showIdTypeDesc,
  showGenderType,
} from "@/common/common.js";


import MyModalUpdatePassenger from "@/components/modal/my-modal-update-passenger.vue";
import MyModalChangeTicket from "@/components/modal/my-modal-change-ticket-multi.vue";
import MyModalRefundTicketMulti from "@/components/modal/my-modal-refund-ticket-multi.vue";
import MyModalSms from "@/components/modal/my-modal-sms.vue";

export default {
  props: {
    flights: {
      required: true,
      type: Array,
    },
  },
  components: {
    MyModalUpdatePassenger,
    MyModalChangeTicket,
    MyModalRefundTicketMulti,
    MyModalSms,
  },
  data() {
    return {
      modalTitle: "",
      modalTitle2: "",
      modalNullable: false,

      detailFlightId: "",

      subClassSelected: "",
      flightNo: "",
      subClass: ""
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  watch: {
    subClassSelected: function (newVal, oldVal) {
      console.log("subClassSelected: " + newVal + ", " + oldVal)
      this.reCalcFlightNoSelected();
    }
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    commonShowMessage: function (v) {
      if (v.status === "OK") {
        this.showErrMsg("操作成功");
        this.$emit("refresh");
      } else {
        this.showErrMsg("操作失败: " + v.errmsg);
      }
    },
    showPsgType: function (psgType) {
      return showPsgType(psgType);
    },
    showIdTypeDesc: function (idType) {
      return showIdTypeDesc(idType);
    },
    showGenderType: function (gender) {
      return showGenderType(gender);
    },
    sortSubclass: function (classList) {
      if (classList === null) return null;

      var returnedList = classList.slice(0); // 此处若不新建数组，Vue.js总是发警告说 infinite loop

      returnedList.sort(function (a, b) {
        var price0 = 1000000;
        var price1 = 1000000;
        if (a.price !== 0) price0 = a.price;
        if (b.price !== 0) price1 = b.price;

        return price0 - price1;
      });

      return returnedList;
    },
    showFlightDetail: function (fltInfo) {
      // 显示某一航班详情
      if (this.detailFlightId === fltInfo.flightNo) this.detailFlightId = "";
      else this.detailFlightId = fltInfo.flightNo;
    },
    closeDetail: function () {
      this.detailShowing = false;
      this.listShowing = true;
    },
    reCalcFlightNoSelected: function () {
      let idx = this.subClassSelected.indexOf("_")
      console.log(idx)
      if (idx > 0) {
        this.flightNo = this.subClassSelected.substr(0, idx);
        this.subClass = this.subClassSelected.substr(idx+1)
        console.log(this.flightNo + ", " + this.subClass)
      }
    },
    confirmFlight: function (flightIndex) {
      const flt = this.flights[flightIndex]
      console.log(flt)
      const params = {
        'dport': flt.dport,
        'aport': flt.aport,
        'ddate': flt.ddate,
        'flightNo': flt.flightNo,
        'subClass': this.subClass
      }
       this.$emit("confirmFlight", flt.dport, flt.aport, flt.ddate, flt.flightNo, this.subClass, flt.dtime, flt.atime, flt.dterm, flt.aterm);
    }
  },
};
</script>